<html>
    <!--
    Cold Start: GSAP

    This benchmarks cold start - when an animation library has to
    read values from the DOM.

    Run in private browsing mode to avoid browser plugins interfering with
    benchmark.
  -->
    <head>
        <style>
            body {
                padding: 0;
                margin: 0;
            }

            .container {
                padding: 100px;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }

            .container > div {
                width: 100px;
                height: 100px;
            }

            .box {
                width: 10px;
                height: 100px;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
        <script type="module" src="/src/imports/gsap.js"></script>
        <script type="module">
            // Create boxes
            const numBoxes = 100
            let html = ``
            for (let i = 0; i < numBoxes; i++) {
                html += `<div><div class="box"></div></div>`
            }
            document.querySelector(".container").innerHTML = html

            const boxes = document.querySelectorAll(".box")

            setTimeout(() => {
                // Cold start (read from DOM)
                boxes.forEach((box) =>
                    gsap.to(box, {
                        rotate: Math.random() * 360,
                        backgroundColor: "#f00",
                        width: Math.random() * 100 + "%",
                        x: 5,
                        duration: 1,
                    })
                )

                setTimeout(() => {
                    // Unit conversion
                    boxes.forEach((box) =>
                        gsap.to(box, {
                            width: Math.random() * 100 + "px",
                            x: "50%",
                            duration: 1,
                        })
                    )
                }, 1500)
            }, 1000)
        </script>
    </body>
</html>
